<template>
	<view class="wrap">
		<view class="search">
			<u-search v-model="queryComponentsForm.noticeTitle" @custom="search" @search="search"></u-search>
		</view>
		<swiper class="swiper-box">
			<swiper-item class="swiper-item" @touchmove.stop>
				<scroll-view scroll-y style="height: 100%;width: 100%;" enable-back-to-top="true"
					@scrolltolower="reachBottom" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
					@refresherrefresh="refresherrefresh">
					<view>
						<view class="slot-card" v-for="(item, index) in  listCalorimeter" :key="index"
							@click="redirectChanneInfo(item.noticeId)">
							<u-row justify="space-between" gutter="10" customStyle="margin-bottom: 10px">
								<u-col span="9">
									<view>{{ item.noticeTitle }}</view>
								</u-col>
								<u-col span="3">
									<u-tag v-if="item.noticeType == 1" text="通知" type="warning" />
									<u-tag v-if="item.noticeType == 2" text="公告" type="success" />
									<u-tag v-if="item.noticeType == 3" text="重要" type="error" />
									
								</u-col>
							</u-row>
							<u-row justify="space-between" customStyle="margin-bottom: 10px">
								<u-col span="9">
									<view style="color:darkblue;">{{ item.createTime }}</view>
								</u-col>
							</u-row>
						</view>
						<u-loadmore :status="loadStatus" bgColor="#f2f2f2"></u-loadmore>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	import {
		listAppnotice
	} from '@/api/system/appnotice.js'
	
	export default {
		onLoad: function(swiperCurrent) {
			// 监听刷新事件
			uni.$on('refreshCalorimeterIndex', () => {
				this.getCalorimeterList();
			});
			this.getCalorimeterList();
		},
		onUnload() {
			// 页面卸载时移除监听
			uni.$off('refreshCalorimeterIndex');
		},
		data() {
			return {
				currentTab: 0,
				swiperCurrent: 0,
				listCalorimeter: [], //热量
				buttonText: '发布公告',
				loadStatus: 'noMore',
				loadComponentsList: false,
				loadChannelList: false,
				loadTerminalList: false,
				refresherTriggered: false,
				_refresherTriggered: false,
				queryComponentsForm: {
					noticeTitle: '',
					status:'0',
					pageNum: 1,
					pageSize: 10,
				},
				dropdownMenu: [{
					title: '搜索',
					type: 'search',
					prop: 'createBy',
					placeholder: '请输入商品名称'
				}]

			}
		},
		methods: {
			showInfo() {
				this.$tab.navigateTo(`/pages/appnotice/add`)
			},
			changeTab(index) {
				console.log("测试一下:", index);
				this.swiperCurrent = index.index
				if (this.swiperCurrent == 0) {
					this.buttonText = '添加渠道'
				} else {
					this.buttonText = '添加终端'
				}

			},
			search(value) {
				this.queryComponentsForm.noticeTitle = value

				this.listCalorimeter = []
				this.getCalorimeterList()
			},
			//查看热量仪
			getCalorimeterList() {
				this.loadStatus = "loading"
				if (!this.loadComponentsList) {
					this.loadComponentsList = true;
				}
				listAppnotice(this.queryComponentsForm).then(res => {
					for (let i = 0; i < res.rows.length; i++) {
						this.listCalorimeter.push(res.rows[i])
					}
					//如果当前页面*每页条数大于等于总条数的时候，数据加载完毕，页面不再加载
					if ((this.queryComponentsForm.pageNum * this.queryComponentsForm.pageSize) < res.total) {
						this.loadComponentsList = false
						this.loadStatus = "loadmore"
					} else {
						this.loadComponentsList = true
						this.loadStatus = "nomore"
					}
				})
			},

			//下拉获取更多数据
			reachBottom() {
				if (this.buttonText === '添加渠道') {
					if (!this.loadComponentsList) {
						this.queryComponentsForm.pageNum += 1;
						this.getCalorimeterList();
					} else {
						this.loadStatus = "nomore"
					}
				} else {
					if (!this.loadComponentsList) {
						this.queryComponentsForm.pageNum += 1;
						this.getCalorimeterList();
					} else {
						this.loadStatus = "nomore"
					}
				}
			},
			refresherrefresh() {
				if (this._refresherTriggered) {
					return;
				}
				this._refresherTriggered = true;
				//界面下拉触发，triggered可能不是true，要设为true
				if (!this.refresherTriggered) {
					this.refresherTriggered = true;
				}
				this.loadStoreData();
			},
			loadStoreData() {
				if (this.buttonText === '添加渠道') {
					//加载渠道客户信息
					this.queryComponentsForm.pageNum = 1
					this.listCalorimeter = []
					this.getCalorimeterList();
					setTimeout(() => {
						this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
						this._refresherTriggered = false;
					}, 1000)
				} else {
					//加载终端客户信息
					this.queryComponentsForm.pageNum = 1
					this.listCalorimeter = []
					this.getCalorimeterList();
					setTimeout(() => {
						this.refresherTriggered = false; //触发onRestore，并关闭刷新图标
						this._refresherTriggered = false;
					}, 1000)
				}

			},
			onPullDownRefresh() {
				setTimeout(function() {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			redirectChanneInfo(noticeId) {
				uni.navigateTo({
					url: `/pages/notice/item?noticeId=${noticeId}`
				});
			},
			redirectTerminalInfo(terminalId) {
				uni.navigateTo({
					url: `/pages/system/terminal/item?terminalId=${terminalId}`
				});
			}
		},
		onUnload() {
			const pageFlag = wx.getStorageSync('pageFlag');
			const pageLength = getCurrentPages();
			if (pageLength.length > 2 && pageFlag) {
				wx.removeStorageSync('pageFlag')
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #f5f5f5;
	}

	.search {
		padding: 20rpx 20rpx 0;
		height: 105rpx;
		background: #ffffff;
	}

	.text-area {
		margin-top: 80rpx;
		margin-bottom: 20rpx;
		display: flex;
		justify-content: center;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.slot-card {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 40rpx;
		font-size: 34rpx;
		color: $u-content-color;
	}
</style>